<template>
  <div class="flex">
    <div class="tit_wrap">
      <div class="tit_item active">全部</div>
      <div
        class="tit_item"
        :class="{ active: current == index }"
        v-for="(item, index) in options"
        :key="index"
        @click="toggle(index, item)"
        >{{ item.label }}</div
      >
    </div>
    <div class="flex1">
      <zbTable
        v-if="typeObj.value"
        ref="tableRef"
        :api-fun="get_list"
        :type="typeObj.value"
        @getselection="getselection"
        @action="action"
      >
        <template #toolbar>
          <a-space>
            <!-- <a-button
              :type="item.types == 'add' ? 'primary' : 'dashed'"
              v-for="item in optBtn"
              :key="item.url"
              v-permission="item.url"
              @click="topAction(item)"
            >
              <template #icon>
                <plus-outlined v-if="item.types == 'add'" />
                <clear-outlined v-else-if="item.types == 'delete'" />
                <rest-outlined v-else-if="item.types == 'recycling'" />
              </template>
              <span>{{ item.name }}</span>
            </a-button> -->
            <template v-if="delArrShow">
              <a-button class="ele-btn-icon" @click="delArrHide()"
                ><span>取消</span></a-button
              >
              <a-button
                type="primary"
                danger
                ghost
                class="ele-btn-icon"
                @click="delArrFun()"
                ><span>确认删除</span></a-button
              >
            </template>
          </a-space>
        </template>
      </zbTable>
      <!-- 新建弹窗 -->
      <add
        ref="addRef"
        v-if="showAdd"
        :editName="editName"
        v-model:visible="showAdd"
        @done="done"
      />
      <!-- 编辑弹窗 -->
      <edit
        v-if="showEdit"
        :editId="editId"
        :editName="editName"
        v-model:visible="showEdit"
        @done="done"
      />
      <!-- 回收站弹窗 -->
      <recycle v-if="showRecycle" v-model:visible="showRecycle" @done="done" />
      <a-modal
        v-model:visible="popconfirm"
        title="提示"
        centered
        :width="260"
        @ok="delFun"
        ><p>删除后无法恢复，请谨慎操作</p></a-modal
      >
    </div>
  </div>
</template>
<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import zbTable from './components/gemAttrIndex.vue';
  import { message } from 'ant-design-vue';
  import { get_list, delArr } from '@/api/material/gem_attribute';
  import add from './components/add.vue';
  import edit from './components/edit.vue';
  import recycle from './components/recycle.vue';

  const loading = ref(false);
  const options = ref([
    /* {label:'石号', value:'stone'}, */
    { label: '形状', value: 'form' },
    { label: '颜色', value: 'color' },
    { label: '净度', value: 'neatness' },
    { label: '切工', value: 'cut' },
    { label: '对称', value: 'symmetric' },
    { label: '抛光', value: 'buffing' },
    { label: '荧光', value: 'fluorescence' }
  ]);
  const current = ref(0);
  const typeObj = ref({});
  const showAdd = ref(false);
  const showEdit = ref(false);
  const editId = ref(null);
  const editName = ref(null);
  const popconfirm = ref(false);
  const delArrShow = ref(false); //批量删除确认弹框
  const delArrData = ref([]); //批量删除的id
  const addRef = ref(null); //获取新建弹窗组件
  const showRecycle = ref(false);
  const type = ref(null);

  onMounted(() => {
    typeObj.value = options.value[0];
    editName.value = options.value[0].label;
  });

  const toggle = (index, item) => {
    current.value = index;
    typeObj.value = item;
    editName.value = item.label;
    tableRef?.value?.changeType(typeObj.value.value);
  };
  // 获取子组件
  const tableRef = ref(null);

  const done = () => {
    reloadTable();
  };
  const reloadTable = () => {
    showAdd.value = false;
    showEdit.value = false;
    tableRef.value.changeSelection(false);
    tableRef.value.reload();
  };
  //单个删除
  const delFun = () => {
    delArr({ id: delArrData.value })
      .then((res) => {
        message.success(res.msg);
        popconfirm.value = false;
        reloadTable();
        loading.value = false;
      })
      .catch((e) => {
        message.error(e);
        loading.value = false;
      });
  };
  const delArrHide = () => {
    tableRef.value.changeSelection(false);
    delArrShow.value = false;
  };
  const delArrOpt = () => {
    tableRef.value.changeSelection(true);
    delArrShow.value = true;
  };
  //批量删除
  const delArrFun = () => {
    delArr({ id: delArrData.value })
      .then((res) => {
        message.success(res.msg);
        delArrHide();
        reloadTable();
        loading.value = false;
      })
      .catch((e) => {
        message.error(e);
        loading.value = false;
      });
  };
  //获取选中的行
  const getselection = (val) => {
    delArrData.value = [];
    val.value.map((item) => {
      delArrData.value.push(item.id);
    });
  };
  const action = (data) => {
    if (data.action_data.type == 'add') {
      showAdd.value = true;
    }
    if (data.action_data.type == 'recycling') {
      showRecycle.value = true;
    }
    if (data.action_data.type == 'edit') {
      showEdit.value = true;
      editId.value = data.row_data.id;
    }
    if (data.action_data.type == 'delete') {
      if (data.action_data.mold == 'more') {
        delArrOpt();
      } else {
        delArrData.value = [];
        delArrData.value.push(data.row_data.id);
        popconfirm.value = true;
      }
    }
  };
</script>
